<style rel="styleesheet" lang="less">
@media screen and (min-width: 829px) {
  .training {
    overflow: hidden;
    width: 100%;
    background:rgba(251,251,254,1);
    padding-bottom: 6rem;
    .active {
      color: #F37D0A
    }
    .btn-box,
    .type {
      display: none
    }
    .wrapTraining {
      width: 80%;
      height: 100%;
      margin: 0 auto;
      .kind {
        margin-top: 3.5rem;
        margin-bottom: 1rem;
        height: 2.43rem;
        ul {
          position: relative;
        }
        ul li {
          float: left;
          font-size: 1.57rem;
          cursor: pointer;
          margin-right: 3.5rem;
        }
        ul li:last-child {
          margin-right: 0
        }
        ul .active {
          color: #F37D0A;
        }
      }

      .content li {
        clear: both;
        width: 100%;
        height: 21.5rem;
        border-radius: 0.43rem;
        margin-top: 2.9rem;
        background-color: white;
        box-shadow: 0 0 2.14rem rgba(34,17,0,0.08);
        .liWrap {
          padding-left: 2.2rem;
          position: relative;
          .title {
            margin-top: 2.79rem;
            font-size: 1.43rem;
            
            color: rgba(51, 51, 51, 1);
            line-height: 1.43rem;
          }
          .leader {
            margin-top: 2.07rem;
          }
          p {
            margin-top: 0.9rem;
            color: #666666;
            font-size: 1rem;
            
            color: rgba(153, 153, 153, 1);
          }
          .apply .apply_yes {
            position: absolute;
            bottom: 0rem;
            right:4rem;
            padding: 0;
          }
          .apply .apply_no{
            position: absolute;
            bottom: 0rem;
            right: 4rem;
            padding: 0;

          }
          .applyWord {
            position: absolute;
            bottom: 0rem;
            right: 3.21rem;
          }
        }
      }
      /*.apply span{*/
        /*position: absolute;*/
        /*padding-right: 3rem;*/
        /*font-size: 4rem;*/
        /*padding-bottom: 1.5rem;*/
      /*}*/
      .ing {
        border-top: 5px solid #F3A40A;
      }
      .over {
        border-top: 5px solid #CCCCCC;
      }
    }
    #searchCom_mobile,.search-box-mobile{
      display: none;
    }
    #searchCom_pc {
      float: right;
      margin-top: 3.5rem;
      margin-bottom: 1rem;
      height: 2.43rem;
      position: relative;
      .searchBox {
        float: right;
        width: 20.71rem;
        height: 2.43rem;
        background: #FBFBFE;
        border: 1px solid #CCCCCC;
        border-radius: 1.14rem;
        padding-left: 15px;
      }
      .searchLogo{
        font-size: 1rem;
        cursor: pointer;
        position: absolute;
        right: 0.8rem;
        top: 0.8rem;
        color: #CCCCCC;
      }
    }
  }
}

@media screen and (max-width: 829px) {
  .training {
    /*background-color: #F6F7FB;*/
    height: 100%;
    * {
      box-sizing: border-box;
    }
    .content {
      width: 100%;
      height: 100%;
      clear: both;
    }
    .content li{
      border-bottom: .16rem solid #F6F7FB;
    }
    .kind {
      font-size: 0.28rem;
      font-weight: bold;
      background-color: #FFFFFF;
      padding-left: 0.3rem;
      margin-bottom: 0.16rem;
      width: 83%;
      li {
        display: inline-block;
        margin-right: 0.5rem;
        color: #3E3A39;
        line-height: 1.05rem;
        border-bottom: 2px solid #F6F7FB;
      }
      li:last-child {
        margin-right: 0
      }
      li.active {
        color: #FD9D40
      }
    }
    .ing {
      /*border-bottom: 10px solid #F6F7FB;*/
      .type {
        background-color: #1DBDFD;
      }
    }
    .over {
      /*border-bottom: 10px solid #F6F7FB;*/
      .type {
        background-color: #1a1a1a;
      }
    }
    .ing,
    .over {
      background-color: #fff;
      margin-bottom: 0.16rem;
      padding: 0 0.32rem;
      position: relative;
      .type {
        position: absolute;
        top: 0;
        right: 0.3rem;
        font-size: 0.24rem;
        color: #fff;
        padding: 0.1rem 0.28rem;
        margin: 0;
      }
      .title {
        font-size: 0.32rem;
        padding: 0.5rem 0;
        font-weight: bold;
      }
      p {
        font-size: 0.26rem;
        color: #888;
        padding: 0.1rem 0;
        span {
          display: inline-block;
          width: 75%;
          vertical-align: top;
        }
      }
      .apply {
        display: none
      }
      .btn-box {
        padding: 0.5rem;
        height: 1.9rem;
      }
      #sign {
        width: 100%;
        line-height: 0.9rem;
        font-size: 0.32rem;
        vertical-align: top;
        background-color: #FD9D40;
      }
    }
    #searchCom_pc{
      display: none;
    }
    #searchCom_mobile{
      float: right;
      background-color: #FFFFFF;
      height: 1.05rem;
      line-height: 1.05rem;
      text-align: center;
      width: 17%;
      position: relative;
    }
    .search-box-mobile{
      transform: translateX(-825px);
      transition:all .3s linear;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      height: 1.05rem;
      border-radius: 2px;
      background-color: #fff;
      input{
        width: 80%;
        display: inline-block;
        border-radius: 33px;
        height: 80%;
        margin-top: 1%;
        padding-left: 15px;
        font-size: .3rem;
        border: 1px solid #e2e2e5;
      }
    }

    .showTranslate{
      transform: translateX(0px);
    }
    .reduction,.sure{
      display: inline-block;
      width: 10%;
      height: 100%;
      text-align: center;
      font-size: 0.25rem;
      line-height: 1.05rem;
    }
    .reduction{
      float: left;
    }
    .sure{
      float: right;
    }
  }
}
</style>
<template>
  <div class="training" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="wrapTraining">
      <el-row>
        <el-col :xs="20" :sm="14" :md="12" :lg="12" class="kind">
          <ul>
            <li :class="{'active':num==1}" @click="active(1)">全部</li>
            <li :class="{'active':num==2}" @click="active(2)">报名中</li>
            <li :class="{'active':num==3}" @click="active(3)">已结束</li>
          </ul>
        </el-col>

        <div id="searchCom_pc" class="search show-search">
          <div class="search-box">
            <input type="text" v-model="searchData" class="searchBox" @keyup.enter="setSearch()">
            <span class="icon-search searchLogo" @click="setSearch()"></span>
          </div>
        </div>

        <div id="searchCom_mobile">
          <span class="icon-search searchLogo" @click="openSearchBox"></span>
        </div>
        <div class="search-box-mobile"  :class="{'showTranslate':showSearch}">
          <div class="reduction" @click='closeSearchBox'><span class="icon-return return"></span></div>
          <input type="text" v-model="searchData" class="searchBox" @keyup.enter="setSearch()">
          <div class="sure" @click="setSearch"><span class="icon-search search"></span></div>
        </div>

        <ul class="content">
          <li @click="goActive(item)" v-for="(item,index) in trainingInfo" :class="item.State!=1?'over':'ing'">
            <div class="liWrap">
              <h3 class="title">{{item.Name}}</h3>
              <p class="leader">主&nbsp;&nbsp;讲&nbsp;人：
                <span>{{item.TeachersName}}</span>
              </p>
              <p>培训地点：
                <span>{{item.Address}}</span>
              </p>
              <p>培训对象：
                <span>{{item.Target}}</span>
              </p>
              <p>培训人数：
                <span>{{item.Number}}</span>
              </p>
              <p>培训时间：
                <span>{{$bw.format(item.StartTime,'date')}}</span>
              </p>
              <p>报名截止：
                <span>{{$bw.format(item.DeadLineTime,'dateTime')}}</span>
              </p>
              <div class="apply">
                <img class="apply_yes" src="../../static/img/报名中.png" alt="" v-show="item.State==1" style="cursor: pointer">
                <img class="apply_no" src="../../static/img/已结束.png" alt="" v-show="item.State==4" style="cursor: pointer;">
                <img class="apply_no" src="../../static/img/报名结束.png" alt="" v-show="item.State==2" style="cursor: pointer;">
                <img class="apply_no" src="../../static/img/未开始.png" alt="" v-show="item.State==0" style="cursor: pointer;">
                <img class="apply_no" src="../../static/img/进行中.png" alt="" v-show="item.State==3" style="cursor: pointer;">

              </div>
              <div class="btn-box">
                <span id="sign" class="bw-btn bw-btn-warning" v-show="item.State==1">报名</span>
              </div>
            </div>
            <div class="type over" v-show="item.State==4">已结束</div>
            <div class="type ing" v-show="item.State==1">报名中</div>
            <div class="type ing" v-show="item.State==2">报名已结束</div>
            <div class="type ing" v-show="item.State==0">未开始</div>
            <div class="type ing" v-show="item.State==3">进行中</div>
          </li>
          <li v-show="trainingInfo.length==0" style="background-color: #fbfbfe;box-shadow: 0 0 0rem rgba(34,17,0,0.08);">
            <span style="color: #CCCCCC">无更多数据展示</span>
          </li>
        </ul>
      </el-row>
    </div>
  </div>
</template>
<script>
//import search from '../components/search.vue'
export default {
  data() {
    return {
      searchData: "",
      num: 1,
      fullscreenLoading: false,
      PageSize: 10,
      trainingInfo: [],
      requestData: {
        "Filter": [],
        "PageIndex": 1,
        "PageSize": 10,
        "Condition": []
      },
      showSearch:false
    }
  },
  components: {
//      search
  },
  methods: {
    openSearchBox(){
      this.showSearch = true
    },
    closeSearchBox(){
      this.showSearch = false
    },
    goActive(item) {
      this.$router.push({ path: '/trainingTrainingInfo', query: { trainId: item.TrainId } })
    },
    active(index) {
      this.num = index
      if (index == 1) {
        var resultIndex = this.sumSerachData("state");
        if (resultIndex >= 0) {
          this.requestData.Filter.splice(resultIndex, 1);
        }
      }
      if (index == 2) {
        var resultIndex = this.sumSerachData("state");
        if (resultIndex >= 0) {
          this.requestData.Filter[resultIndex].FieldValue = 1;
        } else {
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "[State]",
            "FieldValue": 1,
            "SqlOperator": 3,
            "IsQuery": true
          })
        }
      }
      if (index == 3) {
        var resultIndex = this.sumSerachData("state");
        if (resultIndex >= 0) {
          this.requestData.Filter[resultIndex].FieldValue = 4;
        } else {
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "[State]",
            "FieldValue": 4,
            "SqlOperator": 3,
            "IsQuery": true
          })
        }

      }
      this.getTrainingInfo(1);
    },

    getTrainingInfo(PageIndex) {
      this.requestData.PageIndex = PageIndex;
      this.requestData.PageSize = this.PageSize;
      this.requestData.Condition = this.requestData.Filter;
      this.$service('/api/TrainClass/GetPageList', 'post', this.requestData).then((response) => {
        this.fullscreenLoading = false;
        if (response.Data) { this.trainingInfo = response.Data.Items; } else {
          this.trainingInfo = [];
        }
      })
        .catch(err => {
          this.fullscreenLoading = false;
        })
    },

    sumSerachData(name) {
      for (var i = 0; i < this.requestData.Filter.length; i++) {
        var item = this.requestData.Filter[i];
        if (item.GroupName == name) {
          return i
        }
      }
      return -1;
    },
    setSearch() {
      var resultIndex = this.sumSerachData("Namexx");
      if (this.searchData.length < 1) {
        if (resultIndex >= 0) {
          this.requestData.Filter.splice(resultIndex, 1);
          return;
        }
      } else {
        if (resultIndex >= 0) {
          this.requestData.Filter[resultIndex].FieldValue = this.searchData;
        } else {
          this.requestData.Filter.push({
            "GroupName": "Namexx",
            "FieldName": "Name",
            "FieldValue": this.searchData,
            "SqlOperator": 0,
            "IsQuery": true
          })
        }

      }
      this.getTrainingInfo(1);
    }
  },
  props: ['rootInfo'],
  mounted() {
    this.getTrainingInfo(1);
    if (document.body.offsetWidth || window.screen.width < 829) {
      this.rootInfo.showFooter = false;
    } else {
      this.rootInfo.showFooter = true;
    }
  },
}

</script>
